<template>
  <div class="attrs-too-view">
    <div>arrtsToo 孙组件（相对于index）:</div>
    <p class="msg">子组件可以通过 v-bind="$attrs"， 可以将属性继续向下传递，</p>
    <p class="msg">
      如果想要添加其他属性，可继续绑定属性。但要注意的是，继续绑定的属性和
      $attrs 中的属性有重复时，继续绑定的属性优先级会更高
    </p>
    <p>$arrts:{{ $attrs }}</p>
    <div>prop->age: {{ age }}</div>
  </div>
</template>
<script>
export default {
  props: {
    age: {
      type: String,
    },
  },
  data() {
    return {};
  },
  created() {
    console.log(this.$parent, '=====parent');
    // this.$emit("getInfo", "我是grandson");
    this.$emit("getMessage", "我是grandson");
    console.log(this.$listeners, "====listeners");
  },
};
</script>
<style lang="scss" scoped>
.attrs-too-view {
  margin: 5px;
  border: 1px dashed green;
  padding: 5px;
  .msg {
    padding: 0;
    margin: 2px;
    font-size: 14px;
    color: #dd862e;
  }
}
</style>